<!doctype html>
<!-- Copyright Eric Bidelman <ebidel@gmail.com> -->
<html>
<head>
  <title>geo-location Demo</title>
  <script src="../platform/platform.js"></script>
  <link rel="import" href="geo-location.html">
  <link href="//fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,800|Source+Code+Pro" rel="stylesheet">
  <style>
  * {
    box-sizing: border-box;
  }
  html, body {
    height: 100%;
    padding: 0;
  }
  body {
    font-family: 'Open Sans', sans-serif;
    background: black;
    color: white;
  }
  h2 {
    font-weight: 300;
    font-size: 3.5vw;
    margin-top: 0;
  }
  pre {
    font-family: 'Source Code Pro';
  }
  </style>
</head>
<body layout vertical center-justified center unresolved>

<geo-location watchpos></geo-location>

<template is="auto-binding">
  <h2><pre>&lt;geo-location latitude="{{latitude}}"
              longitude="{{longitude}}">
&lt;/geo-location></pre></h2>
</template>

<div>Position updates as your device moves</div>

<script>
var t = document.querySelector('template');
t.latitude = '???';
t.longitude = '???';

var geolocation = document.querySelector('geo-location');
geolocation.addEventListener('geo-response', function(e) {
  t.latitude = this.latitude.toFixed(6);
  t.longitude = this.longitude.toFixed(6);
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

 ga('create', 'UA-43475701-1', 'ebidel.github.io');
 ga('send', 'pageview');
</script>
</body>
</html>
